<template>
	<view class="childAccountDetailItem-container">
		<scroll-view class="scroll-wrap" scroll-y="true">
			<view class="account-info-wrap">
				<view class="status-row">
					<text>总资产</text>
					<text class="status-txt">
						{{accountDetail && accountDetail.status ? accountDetail.status : "--"}}
					</text>
				</view>
				<view class="money-row" @click="handleItemEvent({action:'changeUnit'})">
					<text class="money-value">
						{{accountDetail && accountDetail.amount ? accountDetail.amount : 0}}
					</text>
					<text class="money-unit">USDT</text>
					<image src="/static/mine/jt-top.png" mode="aspectFill"></image>
				</view>
				<view class="money-balance">未使用资金
					{{accountDetail && accountDetail.unusedFunds ? accountDetail.unusedFunds : 0}}USDT
				</view>
				<view class="earnings-row">
					<view class="ea-item">
						<text>当前收益</text>
						<text class="ea-value">
							<template v-if="accountDetail && accountDetail.curProfit">
								{{accountDetail.curProfit >= 0 ? "+" : "-"}} {{accountDetail.curProfit}}
							</template>
							<template v-else>0</template>
							<text style="margin-left: 6rpx;">USDT</text>
						</text>
					</view>
					<view class="ea-item">
						<text>累计收益</text>
						<text class="ea-value">
							<template v-if="accountDetail && accountDetail.accProfit">
								{{accountDetail.accProfit >= 0 ? "+" : "-"}} {{accountDetail.accProfit}}
							</template>
							<template v-else>0</template>
							<text style="margin-left: 6rpx;">USDT</text>
						</text>
					</view>
				</view>
				<view class="menu-btns">
					<view class="btn btn1" @click="handleItemEvent({action:'buyIn'})">买入</view>
					<view class="btn btn2" @click="handleItemEvent({action:'allSell'})">一键平仓</view>
				</view>
				<view class="line-box"></view>
				<view class="account-box">
					<text>子账号邮箱</text>
					<text class="account-box-value van_ellipsis">
						{{accountDetail && accountDetail.subAccountName ? accountDetail.subAccountName : "--"}}
					</text>
				</view>
				<view class="account-box">
					<text>api key</text>
					<text class="account-box-value van_ellipsis">
						{{accountDetail && accountDetail.apiKey ? accountDetail.apiKey : "--"}}
					</text>
				</view>
				<view class="account-box">
					<text>secret key</text>
					<text class="account-box-value van_ellipsis">
						{{accountDetail && accountDetail.secretKey ? accountDetail.secretKey : "--"}}
					</text>
				</view>
				<view class="account-box">
					<text>IP地址</text>
					<text class="account-box-value van_ellipsis">
						{{accountDetail && accountDetail.ipWhite ? accountDetail.ipWhite : "0.0.0.0"}}
					</text>
					<view class="copy-ip" @click="handleItemEvent({action:'copyIp'})">复制</view>
				</view>
			</view>
			<view class="child-orders">
				<view class="head-change">
					<view class="head-content">
						<view class="order-switch" :class="tabIndex == 0 ? 'tab-active' : ''"
							@click="handleItemEvent({action:'tabsEvent',index:0})">当前订单</view>
						<view class="order-switch" :class="tabIndex == 1 ? 'tab-active' : ''"
							@click="handleItemEvent({action:'tabsEvent',index:1})">历史订单</view>
					</view>
				</view>
				<z-paging :fixed="false" :auto-show-system-loading="true" :auto="true" ref="pagingOne"
					v-model="orderData" @query="reqList">
					<orderItem :datas="orderData" :scene="orderItemScene" />
				</z-paging>
				<view class="">到底</view>
			</view>

			<!-- 一键平仓 -->
			<onKeyClearPanel ref="refOnKeyClearPanel" @complete="handleClearComplete" />

		</scroll-view>
	</view>
</template>

<script>
	import orderItem from "../../../order/components/orderItem.vue"
	import {
		accountInfo
	} from "@/api/subAccount.js"
	import {
		childOrderNow,
		childOrderHistory
	} from "@/api/order.js"

	export default {
		components: {
			orderItem
		},
		props: {
			subAccountId: {
				type: String | Number,
				default: ""
			}
		},
		data() {
			return {
				tabIndex: 0,
				orderData: [],
				orderItemScene: "childNow",
				sub_account_id: "",
				accountDetail: null
			};
		},
		watch: {
			subAccountId: {
				handler(val) {
					this.sub_account_id = val;
					this.reqAccountInfo();
					this.reqList();
				}
			},
			tabIndex: {
				handler(val) {
					console.log('切换了', val)
				}
			}
		},
		methods: {
			reqAccountInfo() {
				accountInfo(this.sub_account_id).then(res => {
					this.accountDetail = res.data;
				});
			},

			/**
			 * 获取订单列表
			 * @param {Number} subAccountId 子账号id
			 */
			async reqList(pageNo, pageSize) {
				if (this.isEmpty(this.sub_account_id)) {
					this.$refs.pagingOne.complete([]);
					return
				}
				if (this.tabIndex == 0) {
					childOrderNow({
						subAccountId: this.sub_account_id
					}).then(res => {
						this.$refs.pagingOne.complete(res.data.orders);
					}).catch(res => {
						this.$refs.pagingOne.complete(false);
					})

				} else {
					childOrderHistory({
						limit: pageSize,
						page: pageNo,
						subAccountId: this.sub_account_id
					}).then(res => {
						this.$refs.pagingOne.complete(res.data.orders);
					}).catch(res => {
						this.$refs.pagingOne.complete(false);
					})
				}
			},

			handleItemEvent(vals) {
				const {
					action,
					index
				} = vals;
				switch (action) {
					case "tabsEvent": // tab事件
						this.tabIndex = index;
						this.orderItemScene = index == 0 ? "childNow" : "childHistory";
						this.reqList(1, 10);
						break;

					case "changeUnit": // 切换单位
						uni.showActionSheet({
							itemList: ["CNY", "USDT"]
						})
						break;

					case "buyIn": // 买入

						break;

					case "allSell": // 所有账户一键平仓
						this.$refs.refOnKeyClearPanel.show({
							level: "sub_account",
							subAccountId: ""
						});
						break;

					case "copyIp": // 复制IP
						uni.setClipboardData({
							data: this.accountDetail.ipWhite
						})
						break;
				}
			},

			handleClearComplete() {
				this.$refs.pagingOne.reload();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.childAccountDetailItem-container {
		height: 100%;

		.scroll-wrap {
			height: 100%;
		}

		.account-info-wrap {
			padding: 40rpx 32rpx 32rpx 32rpx;
			background-color: #ffffff;

			.status-row {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-size: 26rpx;
					color: #7B828A;
					line-height: 30rpx;
				}

				.status-txt {
					background-color: rgba(6, 176, 112, 0.10);
					padding: 6rpx 20rpx;
					font-size: 22rpx;
					color: #06B070;
					line-height: 26rpx;
				}
			}

			.money-row {
				color: #26282B;
				font-weight: bold;
				display: inline-block;
				line-height: 70rpx;
				margin-top: 20rpx;

				.money-value {
					font-size: 64rpx;
					line-height: 75rpx;
				}

				.money-unit {
					line-height: 45rpx;
					font-size: 38rpx;
					margin: 0 12rpx;
				}

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.money-balance {
				font-size: 26rpx;
				line-height: 30rpx;
				color: #A6ACB4;
				padding: 12rpx 0 32rpx 0;
			}

			.earnings-row {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.ea-item {
					text {
						font-size: 26rpx;
						line-height: 30rpx;
						color: #7B828A;
					}

					.ea-value {
						color: #06B070;
						margin-left: 12rpx;
					}
				}
			}

			.menu-btns {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;
				;

				.btn {
					flex: 1;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					border-radius: 12rpx;
					font-weight: 600;
				}

				.btn1 {
					color: #ffffff;
					background-color: #63D0A8;
					margin-right: 42rpx;
				}

				.btn2 {
					color: $font-color;
					background-color: $btn-bg-color;
				}
			}

			.line-box {
				height: 1px;
				border-bottom: 1px dashed #A6ACB4;
				margin-bottom: 30rpx;
				margin-top: 40rpx;
			}

			.account-box {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 12rpx;
				border: 1px solid #DBE0E6;
				margin-bottom: 20rpx;
				padding: 0 20rpx;

				m text {
					font-size: 26rpx;
					color: #7B828A;
				}

				.account-box-value {
					flex: 1;
					color: $font-color;
					font-size: 28rpx;
					text-align: right;
					margin-left: 40rpx;
				}

				.copy-ip {
					width: 92rpx;
					height: 46rpx;
					line-height: 46rpx;
					text-align: center;
					background-color: #EEF1F6;
					color: #7B828A;
					font-size: 22rpx;
					border-radius: 8rpx;
					margin-left: 12rpx;
				}
			}
		}

		.child-orders {
			background-color: #fff;
			margin-top: 24rpx;
			padding: 0 32rpx;

			.head-change {
				display: flex;
				align-items: center;
				justify-content: center;

				.head-content {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #F5F7F8;
					border-radius: 12rpx;
					margin-top: 24rpx;
					margin-bottom: 30rpx;
					padding: 8rpx;
				}

				.order-switch {
					width: 144rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 26rpx;
					color: #7B828A;
				}

				.tab-active {
					color: $font-color;
					background-color: #fff;
					border-radius: 12rpx;
				}
			}
		}
	}
</style>